{% extends 'base.html' %}

{% block title %}Brother PT-9500PC 标签设计器{% endblock %}

{% block extra_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/label-ui.css' %}">
{% endblock %}

{% block content %}
<div class="wizard-container">
    <div class="container">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:label_template_list' %}">标签模板管理</a></li>
                <li class="breadcrumb-item active">{% if template %}编辑{% else %}创建{% endif %}模板</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-lg-8">
                <div class="wizard-card">
                    <!-- 向导头部 -->
                    <div class="wizard-header">
                        <h2 class="mb-2">
                            <i class="fas fa-{% if template %}edit{% else %}magic{% endif %} me-3"></i>
                            {% if template %}编辑标签模板{% else %}创建标签模板向导{% endif %}
                        </h2>
                        <p class="mb-0 opacity-75">{% if template %}修改现有模板配置{% else %}通过简单步骤创建专业标签模板{% endif %}</p>
                    </div>

                    <!-- 步骤指示器 -->
                    <div class="wizard-steps">
                        <div class="step active" data-step="1">
                            <div class="step-number">1</div>
                            <span>选择模板</span>
                        </div>
                        <div class="step" data-step="2">
                            <div class="step-number">2</div>
                            <span>基本信息</span>
                        </div>
                        <div class="step" data-step="3">
                            <div class="step-number">3</div>
                            <span>标签内容</span>
                        </div>
                        <div class="step" data-step="4">
                            <div class="step-number">4</div>
                            <span>完成设置</span>
                        </div>
                    </div>

                    <form method="post" id="template-form">
                        {% csrf_token %}
                        
                        <!-- 步骤1: 选择模板预设 -->
                        <div class="wizard-content">
                            <div class="step-content active" data-step="1">
                                <h4 class="mb-4">选择标签模板类型</h4>
                                <p class="text-muted mb-4">选择最适合您需求的标签模板类型，您可以在后续步骤中进一步自定义。</p>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="template-preset selected" data-preset="standard">
                                            <input type="radio" name="preset" value="standard" checked>
                                            <div class="preset-header">
                                                <h5 class="preset-title">标准模板</h5>
                                                <span class="preset-badge badge-recommended">推荐</span>
                                            </div>
                                            <p class="text-muted mb-3">包含基本资产信息和二维码，适合大多数场景使用。</p>
                                            <div class="preset-preview">
                                                <div class="preview-content">
                                                    <div class="label-title" style="margin-bottom: 4px;">示例资产名称</div>
                                                    <div class="label-subtitle" style="margin-bottom: 2px;">编号: AS001</div>
                                                    <div class="label-meta" style="margin-bottom: 2px;">类别: 电脑设备</div>
                                                    <div class="label-meta">部门: IT部门</div>
                                                </div>
                                                <div class="preview-qr">QR</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="template-preset" data-preset="compact">
                                            <input type="radio" name="preset" value="compact">
                                            <div class="preset-header">
                                                <h5 class="preset-title">简洁模板</h5>
                                                <span class="preset-badge badge-compact">节省空间</span>
                                            </div>
                                            <p class="text-muted mb-3">仅包含必要信息，适合小型设备或需要节省空间的场景。</p>
                                            <div class="preset-preview">
                                                <div class="preview-content">
                                                    <div class="label-title" style="font-size: 11px; margin-bottom: 3px;">示例资产</div>
                                                    <div class="label-meta">AS001</div>
                                                </div>
                                                <div class="preview-qr">QR</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="template-preset" data-preset="detailed">
                                            <input type="radio" name="preset" value="detailed">
                                            <div class="preset-header">
                                                <h5 class="preset-title">详细模板</h5>
                                                <span class="preset-badge badge-detailed">信息丰富</span>
                                            </div>
                                            <p class="text-muted mb-3">包含完整的资产信息，适合需要详细标识的重要设备。</p>
                                            <div class="preset-preview">
                                                <div class="preview-content">
                                                    <div class="label-title" style="margin-bottom: 3px;">示例资产名称</div>
                                                    <div class="label-meta" style="margin-bottom: 2px;">编号: AS001 | 类别: 电脑设备</div>
                                                    <div class="label-meta" style="margin-bottom: 2px;">部门: IT部门 | 使用人: 张三</div>
                                                    <div class="label-meta-small">启用: 2024-01-01 | 打印: 2024-01-15</div>
                                                </div>
                                                <div class="preview-qr">QR</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="template-preset" data-preset="custom">
                                            <input type="radio" name="preset" value="custom">
                                            <div class="preset-header">
                                                <h5 class="preset-title">自定义模板</h5>
                                                <span class="preset-badge" style="background: #6366f1; color: white;">灵活配置</span>
                                            </div>
                                            <p class="text-muted mb-3">完全自定义配置，您可以选择需要显示的所有信息字段。</p>
                                            <div class="preset-preview">
                                                <div class="preview-content">
                                                    <div class="label-title" style="margin-bottom: 3px;">自定义内容</div>
                                                    <div class="label-subtitle" style="color: #666;">根据您的选择显示</div>
                                                </div>
                                                <div class="preview-qr">?</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤2: 基本信息 -->
                            <div class="step-content" data-step="2">
                                <h4 class="mb-4">设置基本信息</h4>
                                <p class="text-muted mb-4">为您的标签模板设置名称和描述，这将帮助您和团队更好地识别和使用模板。</p>
                                
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="fas fa-info-circle"></i>
                                        模板信息
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">模板名称 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="name" id="template-name"
                                                   value="{% if template %}{{ template.name }}{% endif %}" 
                                                   required maxlength="100" placeholder="例如：办公设备标签">
                                            <div class="form-text">建议使用简洁明了的名称</div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <label class="form-label">模板描述</label>
                                            <textarea class="form-control" name="description" id="template-description" 
                                                      rows="3" maxlength="500" placeholder="描述模板的用途和特点...">{% if template %}{{ template.description }}{% endif %}</textarea>
                                            <div class="form-text">可选，但建议填写以便团队理解</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="fas fa-cog"></i>
                                        标签配置
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">标签尺寸</label>
                                            <select class="form-select" name="label_size" id="label-size">
                                                <option value="18mm" {% if template and template.label_size == '18mm' %}selected{% endif %}>18mm - 小标签（节省纸张）</option>
                                                <option value="24mm" {% if not template or template.label_size == '24mm' %}selected{% endif %}>24mm - 中标签（推荐）</option>
                                                <option value="36mm" {% if template and template.label_size == '36mm' %}selected{% endif %}>36mm - 大标签（详细信息）</option>
                                            </select>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <label class="form-label">页面布局</label>
                                            <select class="form-select" name="labels_per_page" id="labels-per-page">
                                                <option value="6" {% if template and template.labels_per_page == 6 %}selected{% endif %}>6个/页 (2×3)</option>
                                                <option value="12" {% if not template or template.labels_per_page == 12 %}selected{% endif %}>12个/页 (3×4)</option>
                                                <option value="24" {% if template and template.labels_per_page == 24 %}selected{% endif %}>24个/页 (4×6)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤3: 标签内容 -->
                            <div class="step-content" data-step="3">
                                <h4 class="mb-4">选择标签内容</h4>
                                <p class="text-muted mb-4">选择要在标签上显示的信息字段，您可以根据实际需求自由组合。</p>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="content-option" data-content="qr">
                                            <div class="option-header">
                                                <div class="option-icon">
                                                    <i class="fas fa-qrcode"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">二维码</h6>
                                                    <small class="text-muted">包含资产信息的二维码</small>
                                                </div>
                                                <div class="form-check ms-auto">
                                                    <input class="form-check-input" type="checkbox" name="include_qr" id="include-qr" 
                                                           {% if not template or template.include_qr %}checked{% endif %}>
                                                </div>
                                            </div>
                                            <p class="small text-muted mb-0">扫描可快速获取资产详细信息</p>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="content-option" data-content="category">
                                            <div class="option-header">
                                                <div class="option-icon">
                                                    <i class="fas fa-tags"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">资产类别</h6>
                                                    <small class="text-muted">显示资产所属类别</small>
                                                </div>
                                                <div class="form-check ms-auto">
                                                    <input class="form-check-input" type="checkbox" name="include_category" id="include-category" 
                                                           {% if not template or template.include_category %}checked{% endif %}>
                                                </div>
                                            </div>
                                            <p class="small text-muted mb-0">如：电脑设备、办公家具等</p>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="content-option" data-content="department">
                                            <div class="option-header">
                                                <div class="option-icon">
                                                    <i class="fas fa-building"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">所属部门</h6>
                                                    <small class="text-muted">显示资产归属部门</small>
                                                </div>
                                                <div class="form-check ms-auto">
                                                    <input class="form-check-input" type="checkbox" name="include_department" id="include-department" 
                                                           {% if not template or template.include_department %}checked{% endif %}>
                                                </div>
                                            </div>
                                            <p class="small text-muted mb-0">便于资产归属管理</p>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="content-option" data-content="user">
                                            <div class="option-header">
                                                <div class="option-icon">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">使用人</h6>
                                                    <small class="text-muted">显示资产使用人员</small>
                                                </div>
                                                <div class="form-check ms-auto">
                                                    <input class="form-check-input" type="checkbox" name="include_user" id="include-user" 
                                                           {% if not template or template.include_user %}checked{% endif %}>
                                                </div>
                                            </div>
                                            <p class="small text-muted mb-0">明确资产责任人</p>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="content-option" data-content="date">
                                            <div class="option-header">
                                                <div class="option-icon">
                                                    <i class="fas fa-calendar"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">启用日期</h6>
                                                    <small class="text-muted">显示资产启用时间</small>
                                                </div>
                                                <div class="form-check ms-auto">
                                                    <input class="form-check-input" type="checkbox" name="include_date" id="include-date" 
                                                           {% if template and template.include_date %}checked{% endif %}>
                                                </div>
                                            </div>
                                            <p class="small text-muted mb-0">追踪资产使用历史</p>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <div class="content-option" data-content="timestamp">
                                            <div class="option-header">
                                                <div class="option-icon">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">打印时间</h6>
                                                    <small class="text-muted">显示标签打印时间</small>
                                                </div>
                                                <div class="form-check ms-auto">
                                                    <input class="form-check-input" type="checkbox" name="include_timestamp" id="include-timestamp" 
                                                           {% if template and template.include_timestamp %}checked{% endif %}>
                                                </div>
                                            </div>
                                            <p class="small text-muted mb-0">标签版本管理</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-section mt-4">
                                    <div class="section-title">
                                        <i class="fas fa-edit"></i>
                                        自定义文本
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">标签标题前缀</label>
                                            <input type="text" class="form-control" name="title_prefix" id="title-prefix"
                                                   value="{% if template %}{{ template.title_prefix }}{% endif %}"
                                                   placeholder="例如：公司名称" maxlength="50">
                                            <div class="form-text">显示在标签顶部</div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <label class="form-label">标签底部备注</label>
                                            <input type="text" class="form-control" name="footer_note" id="footer-note"
                                                   value="{% if template %}{{ template.footer_note }}{% endif %}"
                                                   placeholder="例如：如有遗失请联系..." maxlength="100">
                                            <div class="form-text">显示在标签底部</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤4: 完成设置 -->
                            <div class="step-content" data-step="4">
                                <h4 class="mb-4">完成模板设置</h4>
                                <p class="text-muted mb-4">最后设置模板的共享和默认选项，完成模板创建。</p>
                                
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="fas fa-star"></i>
                                        模板设置
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="content-option" data-content="public">
                                                <div class="option-header">
                                                    <div class="option-icon">
                                                        <i class="fas fa-globe"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-1">公共模板</h6>
                                                        <small class="text-muted">允许其他用户使用此模板</small>
                                                    </div>
                                                    <div class="form-check ms-auto">
                                                        <input class="form-check-input" type="checkbox" name="is_public" id="is-public" 
                                                               {% if template and template.is_public %}checked{% endif %}>
                                                    </div>
                                                </div>
                                                <p class="small text-muted mb-0">团队成员可以使用和查看此模板</p>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="content-option" data-content="default">
                                                <div class="option-header">
                                                    <div class="option-icon">
                                                        <i class="fas fa-star"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-1">默认模板</h6>
                                                        <small class="text-muted">设为我的默认标签模板</small>
                                                    </div>
                                                    <div class="form-check ms-auto">
                                                        <input class="form-check-input" type="checkbox" name="is_default" id="is-default" 
                                                               {% if template and template.is_default %}checked{% endif %}>
                                                    </div>
                                                </div>
                                                <p class="small text-muted mb-0">打印标签时优先使用此模板</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-section">
                                    <div class="section-title">
                                        <i class="fas fa-check-circle"></i>
                                        创建总结
                                    </div>
                                    
                                    <div class="alert alert-info">
                                        <h6 class="alert-heading">
                                            <i class="fas fa-info-circle me-2"></i>
                                            模板配置预览
                                        </h6>
                                        <div id="template-summary">
                                            <p class="mb-2"><strong>模板名称：</strong><span id="summary-name">未设置</span></p>
                                            <p class="mb-2"><strong>标签尺寸：</strong><span id="summary-size">24mm</span></p>
                                            <p class="mb-2"><strong>页面布局：</strong><span id="summary-layout">12个/页</span></p>
                                            <p class="mb-0"><strong>包含内容：</strong><span id="summary-content">二维码, 资产类别, 所属部门, 使用人</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- 向导导航 -->
                    <div class="wizard-navigation">
                        <button type="button" class="btn btn-outline-secondary btn-wizard hidden" id="prev-btn">
                            <i class="fas fa-arrow-left me-2"></i>上一步
                        </button>
                        
                        <div class="ms-auto">
                            <a href="{% url 'assets:label_template_list' %}" class="btn btn-outline-secondary btn-wizard me-2">
                                <i class="fas fa-times me-2"></i>取消
                            </a>
                            <button type="button" class="btn btn-primary btn-wizard" id="next-btn">
                                下一步<i class="fas fa-arrow-right ms-2"></i>
                            </button>
                            <button type="submit" class="btn btn-success btn-wizard hidden" id="submit-btn">
                                <i class="fas fa-save me-2"></i>{% if template %}更新{% else %}创建{% endif %}模板
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- 实时预览 -->
                <div class="live-preview">
                    <div class="preview-header">
                        <h5 class="mb-0">
                            <i class="fas fa-eye me-2"></i>
                            实时预览
                        </h5>
                    </div>
                    
                    <div class="label-preview" id="live-label-preview">
                        <div class="preview-content" id="preview-content">
                            <div id="preview-title" class="label-title" style="margin-bottom: 4px;">示例资产名称</div>
                            <div id="preview-number" class="label-subtitle" style="margin-bottom: 2px;">编号: AS001</div>
                            <div id="preview-category" class="label-meta" style="margin-bottom: 2px;">类别: 电脑设备</div>
                            <div id="preview-department" class="label-meta" style="margin-bottom: 2px;">部门: IT部门</div>
                            <div id="preview-user" class="label-meta" style="margin-bottom: 2px;">使用人: 张三</div>
                            <div id="preview-date" class="label-meta-small hidden">启用: 2024-01-01</div>
                            <div id="preview-timestamp" class="label-meta-small hidden">打印: 2024-01-15 10:00</div>
                        </div>
                        <div class="preview-qr qr" id="preview-qr">
                            QR
                        </div>
                    </div>
                    
                    <div class="preview-info">
                        <h6 class="mb-2">
                            <i class="fas fa-info-circle me-2"></i>
                            预览说明
                        </h6>
                        <ul class="small mb-0 ps-3">
                            <li>预览会根据您的选择实时更新</li>
                            <li>实际标签尺寸可能有所差异</li>
                            <li>二维码将包含完整资产信息</li>
                            <li>字体大小会根据标签尺寸调整</li>
                        </ul>
                    </div>
                    
                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-primary btn-sm w-100" id="test-print-btn">
                            <i class="fas fa-print me-2"></i>测试打印预览
                        </button>
                    </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentStep = 1;
    const totalSteps = 4;
    
    // 向导导航
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const submitBtn = document.getElementById('submit-btn');
    
    // 模板预设选择
    const templatePresets = document.querySelectorAll('.template-preset');
    templatePresets.forEach(preset => {
        preset.addEventListener('click', function() {
            templatePresets.forEach(p => p.classList.remove('selected'));
            this.classList.add('selected');
            this.querySelector('input[type="radio"]').checked = true;
            applyPreset(this.dataset.preset);
        });
    });
    
    // 内容选项切换
    const contentOptions = document.querySelectorAll('.content-option');
    contentOptions.forEach(option => {
        const checkbox = option.querySelector('input[type="checkbox"]');
        option.addEventListener('click', function(e) {
            if (e.target.type !== 'checkbox') {
                checkbox.checked = !checkbox.checked;
            }
            option.classList.toggle('selected', checkbox.checked);
            updatePreview();
            updateSummary();
        });
        
        checkbox.addEventListener('change', function() {
            option.classList.toggle('selected', this.checked);
            updatePreview();
            updateSummary();
        });
    });
    
    // 表单字段变化监听
    ['template-name', 'label-size', 'labels-per-page'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('change', updateSummary);
        }
    });
    
    // 应用预设配置
    function applyPreset(preset) {
        const presets = {
            standard: {
                include_qr: true,
                include_category: true,
                include_department: true,
                include_user: true,
                include_date: false,
                include_timestamp: false
            },
            compact: {
                include_qr: true,
                include_category: false,
                include_department: false,
                include_user: false,
                include_date: false,
                include_timestamp: false
            },
            detailed: {
                include_qr: true,
                include_category: true,
                include_department: true,
                include_user: true,
                include_date: true,
                include_timestamp: true
            },
            custom: {
                include_qr: true,
                include_category: true,
                include_department: true,
                include_user: true,
                include_date: false,
                include_timestamp: false
            }
        };
        
        const config = presets[preset];
        if (config) {
            Object.keys(config).forEach(key => {
                const checkbox = document.getElementById(key.replace('_', '-'));
                if (checkbox) {
                    checkbox.checked = config[key];
                    const option = checkbox.closest('.content-option');
                    if (option) {
                        option.classList.toggle('selected', config[key]);
                    }
                }
            });
            updatePreview();
        }
    }
    
    // 更新实时预览
    function updatePreview() {
        const includeQr = document.getElementById('include-qr')?.checked || false;
        const includeCategory = document.getElementById('include-category')?.checked || false;
        const includeDepartment = document.getElementById('include-department')?.checked || false;
        const includeUser = document.getElementById('include-user')?.checked || false;
        const includeDate = document.getElementById('include-date')?.checked || false;
        const includeTimestamp = document.getElementById('include-timestamp')?.checked || false;
        
        // 更新预览元素显示
        const previewQr = document.getElementById('preview-qr');
        const previewCategory = document.getElementById('preview-category');
        const previewDepartment = document.getElementById('preview-department');
        const previewUser = document.getElementById('preview-user');
        const previewDate = document.getElementById('preview-date');
        const previewTimestamp = document.getElementById('preview-timestamp');
        
        if (previewQr) previewQr.style.display = includeQr ? 'flex' : 'none';
        if (previewCategory) previewCategory.style.display = includeCategory ? 'block' : 'none';
        if (previewDepartment) previewDepartment.style.display = includeDepartment ? 'block' : 'none';
        if (previewUser) previewUser.style.display = includeUser ? 'block' : 'none';
        if (previewDate) previewDate.style.display = includeDate ? 'block' : 'none';
        if (previewTimestamp) previewTimestamp.style.display = includeTimestamp ? 'block' : 'none';
        
        // 根据标签尺寸调整预览
        const labelSize = document.getElementById('label-size')?.value || '24mm';
        const labelPreview = document.getElementById('live-label-preview');
        if (labelPreview) {
            switch(labelSize) {
                case '18mm':
                    labelPreview.style.minHeight = '100px';
                    labelPreview.style.fontSize = '11px';
                    break;
                case '36mm':
                    labelPreview.style.minHeight = '180px';
                    labelPreview.style.fontSize = '14px';
                    break;
                default: // 24mm
                    labelPreview.style.minHeight = '140px';
                    labelPreview.style.fontSize = '12px';
            }
        }
    }
    
    // 更新总结信息
    function updateSummary() {
        const templateName = document.getElementById('template-name')?.value || '未设置';
        const labelSize = document.getElementById('label-size')?.value || '24mm';
        const labelsPerPage = document.getElementById('labels-per-page')?.value || '12';
        
        // 收集选中的内容选项
        const contentItems = [];
        if (document.getElementById('include-qr')?.checked) contentItems.push('二维码');
        if (document.getElementById('include-category')?.checked) contentItems.push('资产类别');
        if (document.getElementById('include-department')?.checked) contentItems.push('所属部门');
        if (document.getElementById('include-user')?.checked) contentItems.push('使用人');
        if (document.getElementById('include-date')?.checked) contentItems.push('启用日期');
        if (document.getElementById('include-timestamp')?.checked) contentItems.push('打印时间');
        
        // 更新总结显示
        const summaryName = document.getElementById('summary-name');
        const summarySize = document.getElementById('summary-size');
        const summaryLayout = document.getElementById('summary-layout');
        const summaryContent = document.getElementById('summary-content');
        
        if (summaryName) summaryName.textContent = templateName;
        if (summarySize) summarySize.textContent = labelSize;
        if (summaryLayout) summaryLayout.textContent = `${labelsPerPage}个/页`;
        if (summaryContent) summaryContent.textContent = contentItems.join(', ') || '无';
    }
    
    // 步骤导航
    function showStep(step) {
        // 隐藏所有步骤内容
        document.querySelectorAll('.step-content').forEach(content => {
            content.classList.remove('active');
        });
        
        // 显示当前步骤
        const currentContent = document.querySelector(`[data-step="${step}"]`);
        if (currentContent) {
            currentContent.classList.add('active');
        }
        
        // 更新步骤指示器
        document.querySelectorAll('.step').forEach((stepEl, index) => {
            stepEl.classList.remove('active', 'completed');
            if (index + 1 < step) {
                stepEl.classList.add('completed');
            } else if (index + 1 === step) {
                stepEl.classList.add('active');
            }
        });
        
        // 更新导航按钮
        prevBtn.style.display = step > 1 ? 'inline-block' : 'none';
        nextBtn.style.display = step < totalSteps ? 'inline-block' : 'none';
        submitBtn.style.display = step === totalSteps ? 'inline-block' : 'none';
        
        currentStep = step;
    }
    
    // 下一步
    nextBtn.addEventListener('click', function() {
        if (currentStep < totalSteps) {
            // 验证当前步骤
            if (validateStep(currentStep)) {
                showStep(currentStep + 1);
                if (currentStep === 4) {
                    updateSummary();
                }
            }
        }
    });
    
    // 上一步
    prevBtn.addEventListener('click', function() {
        if (currentStep > 1) {
            showStep(currentStep - 1);
        }
    });
    
    // 验证步骤
    function validateStep(step) {
        switch(step) {
            case 2:
                const templateName = document.getElementById('template-name')?.value?.trim();
                if (!templateName) {
                    alert('请输入模板名称');
                    document.getElementById('template-name')?.focus();
                    return false;
                }
                break;
        }
        return true;
    }
    
    // 测试打印预览
    const testPrintBtn = document.getElementById('test-print-btn');
    if (testPrintBtn) {
        testPrintBtn.addEventListener('click', function() {
            alert('测试打印功能开发中...');
        });
    }
    
    // 初始化
    showStep(1);
    updatePreview();
    updateSummary();
});
</script>

<!-- 编辑模式检查 -->
{% if template %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 延迟执行以确保主脚本已加载
    setTimeout(function() {
        const stepElements = document.querySelectorAll('.step-content');
        if (stepElements.length > 0) {
            // 隐藏所有步骤
            stepElements.forEach(content => content.classList.remove('active'));
            // 显示第二步
            const step2 = document.querySelector('[data-step="2"]');
            if (step2) step2.classList.add('active');
            
            // 更新步骤指示器
            document.querySelectorAll('.step').forEach((stepEl, index) => {
                stepEl.classList.remove('active', 'completed');
                if (index === 0) {
                    stepEl.classList.add('completed');
                } else if (index === 1) {
                    stepEl.classList.add('active');
                }
            });
            
            // 更新按钮
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            if (prevBtn) prevBtn.style.display = 'inline-block';
            if (nextBtn) nextBtn.style.display = 'inline-block';
        }
    }, 100);
});
</script>
{% endif %}
{% endblock %}